<script setup>
import Robot from '../LeftComponents/Robot.vue';
import VideoMonitoring from '../LeftComponents/VideoMonitoring.vue';
import RemoteSupport from '../LeftComponents/RemoteSupport.vue';
</script>

<template>
  <div class="left">
    <div class="leftTop">
      <Robot></Robot>
    </div>
    <div class="leftCenter">
      <VideoMonitoring></VideoMonitoring>
    </div>
    <div class="leftBottom">
      <RemoteSupport></RemoteSupport>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.left {
  width: 2.3438rem;
  height: calc(100% - .2083rem);
  position: absolute;
  left: .1042rem;
  z-index: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.left>div {
  /* height: 32.333%; */
  width: 2.3438rem;
  height: 32%;
  background-image: url('@/assets/card.png');
  background-repeat: no-repeat;
  background-size: 100% 100%;
}
</style>